.liveInteractive {
	@include flexbox();
	@include flex-direction(column);
	height: 100%;
	header {
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height: 40px;
		&>i {
            position: absolute;
			left: 15px;
			top: 15px;
			width: 30px;
			height: 30px;
			background: url(image/icon_retern0.png) no-repeat center;
			background-size: 100%;
			z-index: 2;
		}
		&>span {
			position: absolute;
			right: 15px;
			top: 30px;
			width: 30px;
			height: 30px;
			background: url(image/icon_share.png) no-repeat center;
			background-size: 100%;
		}
		div.vdo {
			width: 100%;
			height: 280px;
			// background: #000;
			video {
				width: 100%;
				height: 100%;
			}
		}
	}
	.border-6 {
		width: 100%;
		height: 3px;
        background: #F6F6F6;
        z-index: 1;
    }
    .controls {
        @include flexbox();
        @include justify-content(flex-end);
        width: 100%;
        position: absolute;
        left: 0;
        top: 260px;
        height: 40px;
        background: #000;
        opacity: .6;
        padding: 0 10px;
        z-index:2;
        img {
           margin: auto 0;
        }
    }
	.chat {
        @include flexbox();
        @include flex-direction(column);
        position: absolute;
        left:0;
        top:300px;
        height: calc(100% - 300px - 50px);
		width: 100%;
		overflow-y: scroll;
        padding: 0 0 20px;
		div.title {
			@include flexbox();
			@include justify-content(space-between);
			padding: 0 15px;
			height: 50px;
			line-height: 50px;
			font-size: 14px;
			color: rgba(51,51,51,1);
			
			&>p {
				img {
					border-radius: 50%;
				}

			}
		}
		.box {
            @include flex();
            width: 100%;
            overflow-y: scroll;
        }
		ul {
			width: 100%;
			padding: 0 15px;
			float: left;
			li {
                // @include flexbox();
                // @include flex-direction(column);
				clear: both;
                padding-top: 16px;
                float: left;
                width: 100%;
                z-index: 1;
                div {
                    @include flexbox();
                    max-width: 80%;
                    p {
                        width: 100%;
                        word-wrap:break-word; 
                        word-break:break-all;
                    }
                }
                &.other {
                    a {
                        float: left;
                        text-align: left;
                    }
                    div {
                        color: rgba(51,51,51,1);
                        margin-left: 10px;
                        position: relative;
                        background: rgba(243,243,247,1);
                        z-index: 3;
                        float: left;
                        i {
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            background:  url(image/left-gray.jpg) no-repeat 0px 0;
                            position: absolute;
                            left: -9px;
                            top: 0;
                            z-index: 2;
                            background-size: 13px;
                        }
                    }
                }
               
                &.me {
                    float: right;
                    a {
                        float: right;
                        text-align: right;
                    }
                    div {
                        color: rgba(255,255,255,1);
                        background: rgba(229,50,45,1);
                        margin-right: 10px;
                        z-index: 1;
                        position: relative;
                        float: right;
                        i {
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            background:  url(image/right-red.jpg) no-repeat 0px 0;
                            position: absolute;
                            right: -14px;
                            top: 0;
                            z-index: 0;
                            background-size: 13px;
                        }
                    }
                }
                

				
					
				
				a {
					font-size: 11px;
					color: rgba(75,75,75,1);
					margin-bottom: 11px;
					time {
						color: rgba(156,156,156,1);
					}
				}
				div {
					clear: both;
					font-size: 15px;
					padding: 5px 10px;
					border-radius: 13px;
				}
			}
		}
	}

	.mc {
		position:absolute;
		// background: rgba(0,0,0,.42);
		width: 100%;
		height: 50px;
		left:0;
		bottom:0;
		z-index: 3;
		.bottom {
			width: 100%;
			background: #fff;
			position: fixed;
			bottom: 0;
			z-index: 2;
			height: auto;
			border-top: 1px solid rgba(223,223,223,1);
			div.input {
				width: 100%;
				background: #fff;
				height: auto;
				padding: 8px 17px 8px 15px;
				@include flexbox();
				input {
					@include flex();
					height: 30px;
					margin: auto 0;
					color: rgba(51,51,51,1);
					font-size: 15px;
					border: 1px solid rgba(223,223,223,1);
					border-radius: 6px;
					padding-left: 10px;
                }
                span {
                    margin-top: auto;
					margin-bottom: auto;
                    margin-left: 20px;
                    height: 30px;
                    line-height: 30px;
                    background: #e5322d;
                    color: #fff;
                    border-radius: 3px;
                    padding: 0 5px;
                }
			}

			::-webkit-input-placeholder { /* WebKit browsers */
			  color: rgba(156,156,156,1);
			  font-size: 15px;
			}
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
			  color: rgba(156,156,156,1);
			  font-size: 15px;
			}
			::-moz-placeholder { /* Mozilla Firefox 19+ */
			  color: rgba(156,156,156,1);
			  font-size: 15px;
			}
			:-ms-input-placeholder { /* Internet Explorer 10+ */
			  color: rgba(156,156,156,1);
			  font-size: 15px;
			}
			a.send {
				display: block;
				height: 50px;
				line-height: 49px;
				text-align: center;
				font-size: 17px;
				color: rgba(51,51,51,1);
				border-top: 1px solid rgba(229,229,229,1);
			}
		}
	}
}